<template>
  <div class="main">
    <el-container class="main-content">
      <!--处理折叠-->
      <el-aside :width="isFold ? '60px' : '210px'">
        <main-menu :isFold="isFold"></main-menu>
      </el-aside>
      <el-container>
        <el-header>
          <main-header @fold-change="handleFoldChange"></main-header>
        </el-header>
        <el-main>
          <router-view></router-view>
          <!-- 路由视图 -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import mainMenu from '@/components/main-menu/main-menu.vue'
import mainHeader from '@/components/main-header/main-header.vue'
//处理mainMenu折叠事件
const isFold = ref(false)
function handleFoldChange(flag: boolean) {
  isFold.value = flag
}
</script>

<style lang="less" scoped>
.main-content {
  height: 100vh;
  background-color: rgb(241, 244, 243);
  .el-aside {
    height: 100%;
    background-color: rgb(10, 12, 12);
    overflow-x: hidden; /* 隐藏横向滚动条 */
    overflow-y: auto; /* 隐藏纵向滚动条 */
    line-height: 200px; /* 文本垂直居中 */
    text-align: left; /* 文本水平居中 */
    cursor: pointer; /* 鼠标指针 */
    transition: width 0.3s linear; /* 平滑过渡 */
    scrollbar-width: none; /* 隐藏滚动条适配不同浏览器 */
    -ms-overflow-style: none; /* 隐藏滚动条 */
    &::-webkit-scrollbar {
      display: none; /* 隐藏滚动条 */
    }
  }
  .el-container {
    height: 100%;
  }
}
</style>
